<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="职位名称:">
        <el-input v-model="queryParam.title"></el-input>
      </el-form-item>
      <el-form-item label="公司名称:">
        <el-input v-model="queryParam.companyName" :disabled="role !== 3"></el-input>
      </el-form-item>
      <el-form-item label="状态:">
        <el-select v-model="queryParam.status" placeholder="请选择状态">
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <router-link v-if="role !== 3" :to="{path:'/company/job/postings/edit'}" class="link-left">
          <el-button type="primary">添加</el-button>
        </router-link>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
      <el-table-column prop="companyName" label="公司名称"/>
      <el-table-column prop="title" label="职位名称"/>
      <el-table-column prop="count" label="招聘人数"/>
      <el-table-column prop="currentQuantity" label="已招人数"/>
      <el-table-column prop="status" label="状态">
        <template slot-scope="{row}">
          {{ formatStatus(row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="MBTI类型" width="200">
        <template slot-scope="{row}">
          <el-tag
            v-for="mbti in row.mbtiList"
            :key="mbti.id"
            size="small"
            class="mbti-tag">
            {{ mbti.mbtiType }}
          </el-tag>
          <span v-if="!row.mbtiList || row.mbtiList.length === 0">暂无</span>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="职位描述" show-overflow-tooltip/>
      <el-table-column prop="requirements" label="任职要求" show-overflow-tooltip/>
      <el-table-column width="220px" label="操作" align="center">
        <template slot-scope="{row}">
          <router-link :to="{path:'/company/job/postings/edit', query:{id:row.jobId}}" class="link-left">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-button size="mini" type="primary" @click="handleMbti(row)">MBTI</el-button>
          <el-button size="mini" type="danger" @click="deletePosition(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
                @pagination="search"/>

    <!-- MBTI Dialog -->
    <el-dialog title="设置MBTI类型" :visible.sync="mbtiDialogVisible" width="500px" :close-on-click-modal="false">
      <el-form :model="mbtiForm" label-width="80px" v-loading="mbtiLoading">
        <el-form-item label="MBTI类型">
          <el-checkbox-group v-model="mbtiForm.types">
            <el-checkbox v-for="type in mbtiTypes" :key="type" :label="type">{{type}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeMbtiDialog">取 消</el-button>
        <el-button type="primary" @click="saveMbtiTypes" :loading="saveLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import positionApi from '@/api/position'
import Pagination from '@/components/Pagination'
import { mapActions } from 'vuex'

export default {
  components: { Pagination },
  data () {
    return {
      queryParam: {
        title: '',
        companyName: '',
        status: null,
        pageNum: 1,
        pageSize: 10,
        companyId: null
      },
      statusOptions: [
        { value: 0, label: '已结束' },
        { value: 1, label: '招聘中' },
        { value: 2, label: '暂停招聘' }
      ],
      role: '',
      listLoading: true,
      tableData: [],
      total: 0,
      mbtiDialogVisible: false,
      mbtiLoading: false,
      saveLoading: false,
      mbtiForm: {
        jobId: null,
        types: []
      },
      mbtiTypes: [
        'INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP',
        'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP'
      ]
    }
  },
  methods: {
    ...mapActions('user', ['initUserInfo']),
    formatStatus (status) {
      const statusMap = {
        0: '已结束',
        1: '招聘中',
        2: '暂停招聘'
      }
      return statusMap[status] || '未知'
    },
    search () {
      this.listLoading = true
      positionApi.pageList(this.queryParam).then(result => {
        const re = result.data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageNum = re.pageNum
        this.listLoading = false
      })
    },
    submitForm () {
      this.queryParam.pageNum = 1
      this.search()
    },
    deletePosition (row) {
      let _this = this
      this.$confirm('确认删除该职位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        positionApi.deletePosition(row.jobId).then(re => {
          if (re.data.code === 1) {
            _this.search()
            _this.$message.success(re.data.message)
          } else {
            _this.$message.error(re.data.message)
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleMbti (row) {
      this.mbtiForm.jobId = row.jobId
      this.mbtiForm.types = row.mbtiList ? row.mbtiList.map(item => item.mbtiType) : []
      this.mbtiDialogVisible = true
    },
    saveMbtiTypes () {
      if (!this.mbtiForm.types.length) {
        this.$message.warning('请至少选择一个MBTI类型')
        return
      }

      this.saveLoading = true
      positionApi.saveMbtiTypes(this.mbtiForm).then(result => {
        if (result.data.code === 1) {
          this.$message.success('MBTI类型保存成功')
          this.closeMbtiDialog()
          this.search()
        } else {
          this.$message.error(result.data.message || '保存失败')
        }
      }).catch(error => {
        this.$message.error('保存失败')
        console.error(error)
      }).finally(() => {
        this.saveLoading = false
      })
    },
    closeMbtiDialog () {
      this.mbtiDialogVisible = false
      this.mbtiForm.jobId = null
      this.mbtiForm.types = []
    }
  },
  created () {
    this.initUserInfo().then(() => {
      const userInfo = this.$store.state.user.userInfo
      if (userInfo) {
        this.queryParam.companyId = userInfo.companyId
        this.queryParam.companyName = userInfo.companyName
        this.role = userInfo.role
      }
      this.search()
    })
  }
}
</script>

<style scoped>
.link-left {
  margin-right: 8px;
}
.el-checkbox {
  margin-right: 15px;
  margin-bottom: 10px;
}
.el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
}
.el-button + .el-button {
  margin-left: 8px;
}
.mbti-tag {
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>
